<template>
  <div class="tab-btn">
    <ul>
      <li v-for="(item,index) in lis" :key="item.title + index" v-text="item.title" :class="item.classList"
          @click="change(index)"></li>
      <div class="extra">加入购物车</div>
    </ul>
  </div>
</template>

<script>
export default {
  name: "LhzTabBtn",
  data() {
    return {
      lis: [{
        'title': '商品介绍',
        'classList': ['current'],
      }, {
        'title': '规格包装',
        'classList': [],
      }, {
        'title': '售后保障',
        'classList': [],
      }, {
        'title': '商品评价(66)',
        'classList': [],
      }, {
        'title': '手机社区',
        'classList': [],
      }],
    }
  },
  methods: {
    change(index) {
      for (const li of this.lis) {
        let classlist = li.classList;
        for (let i = 0; i < classlist.length; i++) {
          if (classlist[i] == 'current') {
            classlist.splice(i, 1);
          }
        }
      }
      this.lis[index].classList.push('current');
      this.$emit('changeTab', index);
    }
  },
  emits: ['changeTab']
}
</script>

<style scoped>
.tab-nav {
  width: 990px;
  border: 1px solid #eee;
  border-bottom: 1px solid #e4393c;
  position: absolute;
  background: #f7f7f7;
  color: #666;
  cursor: pointer;
}

ul {
  margin: 0px;
  padding: 0px;
}

ul > li {
  list-style: none;
  float: left;
  font-size: 14px;
  width: 160px;
  height: 38px;
  line-height: 38px;
  text-align: center;
}

.current {
  background-color: #e4393c;
  color: #fff;
}

.extra {
  text-align: center;
  background-color: #df3033;
  color: #fff;
  cursor: pointer;
  width: 94px;
  height: 32px;
  line-height: 32px;
  position: absolute;
  right: 15px;
  top: 3px;
}
</style>